window.onload=function(){
    let body=document.body;
    // body.style.backgroundColor="red";
    let paletteColor=document.getElementsByClassName("paletteColor")[0];
    let inputArr=paletteColor.querySelectorAll("input");
    // console.log(inputArr);
    let spanArr=paletteColor.querySelectorAll("span");
    // console.log(spanArr);
    let obj={
        R:0,
        G:0,
        B:0,
        A:0.2
    };
    for (let i=0;i<inputArr.length;i++){
        console.log(inputArr[i]);
        inputArr[i].addEventListener("input",function(){
            console.log("事件触发");
            if(i==3){
                spanArr[i].innerHTML=(inputArr[i].value)/100;
            }else{
                spanArr[i].innerHTML=inputArr[i].value;

            }
            console.log(this);
            switch (this.name) {
                case "R":
                    obj.R=this.value;
                    break;
                case "B":
                    obj.B=this.value;
                    break;
                case "G":
                    obj.G=this.value;
                    break;
                case "A":
                    obj.A=(this.value)/100;
                    break;
            }
            console.log(obj);
            body.style.backgroundColor = `rgba(${obj.R},${obj.G},${obj.B},${obj.A})`
        })
    }

    let personalLeft=document.getElementsByClassName("personal_left")[0];
    let Li=personalLeft.getElementsByTagName("li");
    let active=document.getElementsByClassName("active")[0];
    for(let i=0;i<Li.length;i++){
        Li[i].onclick=function(){
            for(let i=0;i<Li.length;i++){
                Li[i].className=" ";
            }
            this.className="active";
        }
    }
    /*改变左侧·导航栏的位置*/
    document.addEventListener('scroll',function(){
        let topJuLi = document.documentElement.scrollTop;
        personalLeft.style.top = (topJuLi)+"px";

    },true);
}